<template>
	<view>
		<view class="top">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="(item, index) in swiper" :key="item.id">
					<image class="swiper-img" :src="item.url" />
				</swiper-item>
			</swiper>
			<view class="top-content">
				<view class="title">永庆控股</view>
				<view class="position">
					<text class="iconfont icon-dingwei" style="color: #b3b3b3;"></text>
<!-- 					<text>距离999千米</text> -->
				</view>
			</view>
		</view>

		<view class="content">
			<view class="left">
				<view @click="catalogClick(item.id)" class="catalog-item" :class="[
						(currentCatalogIndex == index && 'catalogActive'),
						leftItemClass(index)
					]" v-for="(item, index) in catalog" :key="item.key">
					{{item.name}}
				</view>
			</view>
			<view class="right">
				<view class="" v-if="rows.length==0">
					暂无数据...
				</view>
				<template v-else>
					<Item v-for="(book,index) in rows" :key="book.id" :info="book"></Item>
				</template>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		ref
	} from 'vue';
	import Item from './Item.vue'
	import {
		schoolBanner
	} from '@/api/schoole.js'
	import {
		goodstype,
		goods
	} from '../../api/goods';
	import {
		getImage,
	} from '/api/common.js';
	export default {
		data() {
			return {
				swiper: [],
				catalog: [{
					id: 0,
					name: '全部',
					info: '全部',
				}],
				currentCatalogIndex: 0,
				rows:[]

			}
		},
		onLoad(data) {
			this.getCatalogList()
			if (data.id) {
				this.currentCatalogIndex = data.id
			}
			//商品获取
			this.getGoodsList()
			//轮播图获取
			this.getSwiperList()
		},
		components:{
			Item
		},
		methods: {
			async getSwiperList() {
				let res = await getImage({
					type:0,
					page:2
				})
				this.swiper=res.data.data.map((item)=>{
					return  {url:item.images,id:item.id}
				})
			},
			async getCatalogList() {
				const res = await goodstype()
				let arr = res.data.data.map((item) => {
					return {
						id: item.id,
						name: item.name,
						info: item.info,
					}
				})
				this.catalog = [...this.catalog, ...arr]

			},
			async getGoodsList() {
				let res = await goods({
					id: this.currentCatalogIndex
				})
				this.rows = res.data.data
			},
			catalogClick(index) {
				this.currentCatalogIndex = index
				this.getGoodsList()
			},
			leftItemClass(index) {
				let curren = this.currentCatalogIndex;
						let classStr = ''
						if (curren == index - 1) {
							classStr += ' top-right'
						}
						if (curren == index + 1) {
							classStr += ' bottom-right'
						}
						return classStr
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		height: fit-content;
		position: relative;

		.swiper {
			z-index: 10;
			height: 395rpx;
			width: 100vw;
			.swiper-img,
			swiper-item {
				z-index: 10;
				width: 100vw;
				height: 395rpx;
			}
		}

		.top-content {
			background: #fff;
			position: absolute;
			left: 0;
			right: 0;
			bottom: -110rpx;
			z-index: 999;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			padding: 20rpx 30rpx 10rpx 30rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
			}
			.position {
				display: flex;
				align-items: center;

				.icon {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					font-size: 26rpx;
				}

				color: #8c8c8c;
				margin-top: 10rpx;
			}
		}
	}

	.content {
		width: 100vw;
		margin-top: 110rpx;
		padding-bottom: 120rpx;
		position: relative;
		display: flex;
		background: #F6F6F6;

		.left {
			background: #fff;
			width: 200rpx;
			height: 100%;
			position: sticky;
			top: 0;

			.search-btn,
			.catalog-item {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #8c8c8c;
				min-height: 100rpx;
				background: #F6F6F6;
			}

			.catalog-item {
				font-size: 26rpx;
				text-align: center;
				padding: 0 10rpx;
			}

			.bottom-right {
				border-radius: 0 0 25rpx 0;
			}

			.top-right {
				border-radius: 0 25rpx 0 0;
			}

			.catalogActive {
				background: #fff;
				position: relative;

				&:before {
					height: 40rpx;
					width: 6rpx;
					background: #4771F7;
					content: '';
					display: block;
					position: absolute;
					left: 2rpx;
					border-radius: 2rpx;
				}
			}
		}

		.right {
			padding: 0 30rpx;
			background: #fff;
			flex: 1;
			min-height: 100vh;
			overflow: scroll;
			flex: 1;

			.title {
				padding-left: 10rpx;
				font-weight: bold;
				color: #333333;
				line-height: 60rpx;
			}
		}
	}
</style>